import React from 'react'
import queryString from 'query-string' 

import '../style/pingjia.css'
import { Rate } from 'antd';
import {evaluateStar,evaluateClassification,evaluateInformation} from '../api/index'
class Pingjia extends React.Component{
    constructor(){
        super()
        this.state = {
            urlitems:{},
             pingjiaxj:{
                overall_score:0,
                service_score:0,
             },//评价星级
             pingjiafl:[],//评价分类
             pingjiaxx:[],//评价信息
             currentfl:''
        }
    }
componentWillMount(){
    let rest=queryString.parse(this.props.location.search);
    this.state.urlitems=rest
}
    componentDidMount(){
        //获取评价星级
        evaluateStar(this.state.urlitems.id)
        .then(res=>{
           this.setState({
               pingjiaxj:res.data
           })
        })
        //获取评价分类
        evaluateClassification(this.state.urlitems.id)
        .then(res=>{
            this.setState({
                pingjiafl:res.data,
                currentfl:res.data[0]._id
            })
        })
        //获取评价信息
        evaluateInformation(this.state.urlitems.id)
        .then(res=>{
            this.setState({
            pingjiaxx:res.data
            })
        }) 
      
    }
    guolvqi(num){//星星半星过滤器
        if(num==0){
            return 0;
        }else{
            console.log(Math.floor(num*10/5)*0.5)
            return Math.floor(num*10/5)*0.5
        }
    }
    quyi(num){//取一位小数过滤器
        return Math.floor(num*10)/10
    }
    tocurrent(id){
        this.setState({
            currentfl:id
        })
    }
    render(){
       
        return(
           <div  className='pingjia-container' >
               <div className='pingjia-header'>
                    <div className='pingjia-header-left'>
                        <p className='pingjia-header-left-1'>{this.quyi(this.state.pingjiaxj.overall_score)}</p>
                        <p>综合评价</p>
                        <p>高于周边商家{(this.state.pingjiaxj.compare_rating*100).toFixed(1)}%</p>
                    </div>
                    <div className='pingjia-header-right'>
                            <div>服务态度<Rate className='pingjia-header-right-1' disabled allowHalf={true} value={this.guolvqi(this.state.pingjiaxj.service_score)}/>{this.quyi(this.state.pingjiaxj.service_score)}</div>
                            <div>菜品评价<Rate className='pingjia-header-right-1' disabled allowHalf={true} value={this.guolvqi(this.state.pingjiaxj.food_score)}/>{this.quyi(this.state.pingjiaxj.food_score)}</div>
                            <div className='pingjia-header-right-2'  >送达时间 {this.state.pingjiaxj.deliver_time} 分钟</div>
                    </div>
               </div>
               <div className='pingjia-main'>
                        <ul className='pingjia-middle'>
                            {this.state.pingjiafl.map(item=>{
                                return (
                                    <li key={item._id} onClick={this.tocurrent.bind(this,item._id)} className={['pingjia-middle-1',item.unsatisfied?'pingjia-middle-2':'',this.state.currentfl==item._id?'pingjia-middle-3':''].join(' ')}>
                                        {item.name}({item.count})
                                    </li>
                                )
                            })}
                        </ul>
                    
                    <ul className='pingjia-bottom'>
                        {this.state.pingjiaxx.map(item=>{
                            return (
                                <li key={item._id} className='pingjia-bottom-1'>
                                    <div className='pingjia-bottom-2'>
                                        <img className='pingjia-bottom-3' src="http://elm.cangdu.org/img/default.jpg"/>
                                        <div className='pingjia-bottom-4'>
                                            <div className='pingjia-bottom-5'><span>{item.username}</span><span>{item.rated_at}</span></div>
                                            <div className='pingjia-bottom-6'>
                                                <span><Rate className='pingjia-bottom-9' disabled allowHalf={true} value={this.guolvqi(item.rating_star)}/>{this.state.pingjiaxx.time_spent_desc}</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div className='pingjia-bottom-7'>
                                        {item.item_ratings.map(it=>{
                                            return (
                                                <span className='pingjia-bottom-8' key={it.food_id}>{it.food_name}</span>
                                            )
                                        })}
                                    </div>
                                </li>
                            )
                        })}
                    </ul>
              
               </div>
           </div>
        )
     }
}
export default Pingjia